<template>
    <div class="app-container">
        <el-form :model="form" ref="formRef" inline>
            <el-form-item label="用户姓名" prop="trueName">
                <el-input v-model="form.trueName" placeholder="请输入用户姓名" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" >
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column prop="avatar" label="用户头像" align="center" width="120">
                <template #default="{row}">
                    <el-image v-if="row.avatar" :src="row.avatar" style="width: 50px; height: 50px" fit="cover" />
                    <span v-else>无</span>
                </template>
            </el-table-column>
            <el-table-column prop="trueName" label="用户姓名" align="center" />
            <el-table-column prop="nickname" label="用户昵称" align="center" />
            <el-table-column prop="phone" label="手机号" align="center" />
            <el-table-column prop="openId" label="openid" align="center" />
            <el-table-column prop="addressName" label="地址" align="center" />
            <el-table-column prop="createTime" label="创建时间" align="center" />
        </el-table>

        <pagination class="pagination-footer" :total="queryParams.total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="query()"/>
    </div>
</template>
<script>
import { reactive, toRefs } from "vue"
import { getWechatUserList } from "@/api/wechat/wechat_user"

export default {
    name: "wechat_user",
    setup() {
        const data = reactive({
            form: {},
            formRef: null,
            tableData: [],
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            }
        })

        const query = () => {
            getWechatUserList({
                ...data.queryParams,
                ...data.form
            }).then(res=>{
                if(res.code == 200){
                    data.tableData = res.data
                    data.queryParams.total = res.totalRows
                }
            })
        }

        const resetForm = () => {
            data.formRef.resetFields()
            query()
        }

        onMounted(() => {
            query()
        })

        return {
            ...toRefs(data),
            query,
            resetForm
        }
    }
};
</script>
<style lang="scss" scoped>

</style>